<template>
  <div>
    <!--头部-->
    <Header  :chooseValue="7"></Header>
    <!--banner end-->
    <div class="jqgk" style="background:#FFF5E0">
      <div class="contai" style="max-width:1197px;">
        <div class="top_tit" style="margin-top:20px;text-align:left">
          <span
              class="titleFont"
              v-if="pcshow"
              style="color: #840207;"
              id="headline"
              >Video Appreciation</span
            >
            <span
              class="titleFont"
              v-if="!pcshow"
              style="font-size:36px;color: #840207;"
              id="headline"
              >Video Appreciation</span
            >
      
          <div class="voiceTop" style="text-align:center">
            <p class="videoTopTitle">{{title}}</p>
            <div class="travel_con">
              <video-player
                class="video-player vjs-custom-skin"
                style="height: 100%"
                ref="videoPlayer"
                :playsinline="true"
                :options="playerOptions"
              ></video-player>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <Footer></Footer>
  </div>
</template>

<script>
import Header from "./header";
// import HeaderForBeauty from "./headerforbeauty";
import Footer from "./footer";
export default {
  components: { Footer, Header },
  data() {
    return {
      choseValue: 1,
      pcshow: false,
      styletable: {},
      mapStyle: {
        color: "#840207",
        background:
          "linear-gradient(270deg, rgba(132, 2, 7, 0.29), rgba(132, 2, 7, 0))"
      },
      playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
        autoplay: false, // 如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: true, // 导致视频一结束就重新开始。
        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: "zh-CN",
        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            type: "", // 这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
            src: "" // url地址 ？？暂时无可用
          }
        ],
        poster: "", // 你的封面地址  ？？暂时无可用
        // width: document.documentElement.clientWidth, //播放器宽度
        notSupportedMessage: "此视频暂无法播放，请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true // 全屏按钮
        }
      },
      dataList: [],
      listCaiDan: [],
      title: "",
      chooseValue: 1
    };
  },
  beforeCreate() {},
  created() {
    let info = this.$route.query.id;
    if (info.title == undefined) {
      this.$router.push({
        path: "/video",
      });
    } else {
      this.title = info.title;
      this.playerOptions.sources[0].src = info.url;
        if (this._isMobile()) {
        this.pcshow = false;
      } else {
        this.pcshow = true;
      }
    }
  },
   //  监听路由变化
  watch: {
    $route(to, from) {
      let info = to.query.id;
      this.title = info.title;
      this.playerOptions.sources[0].src = info.url;
    }
  },
  mounted() {},

  methods: {
    //选择菜单
    chooseTab(info) {
      this.chooseValue = info.id;
      this.title = info.title;
      this.init2();
    },
    //判断是PC端还是手机端
    _isMobile() {
      let flag = navigator.userAgent.match(
        /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
      );
      return flag;
    },
    //描点跳转
    scrollTitle() {
      var PageId = document.querySelector("#headline");
      window.scrollTo({
        top: PageId.offsetTop - 40,
        behavior: "smooth"
      });
    }
  }
};
</script>
<style>

.videoTopTitle {
  color: #840207;
  font-size: 24px;
  font-weight: bold;
}
.voiceTop {
  text-align: left;
  padding: 10px 60px 60px 60px;
  margin-top: 20px;
}
</style>
